{% extends "base.html" %}

{% block head %}
    <style>
      body {
        padding: 10% 0;
      }
    </style>
    <script>
        $(function(){
          $("#autocomplete").autocomplete({
            autoFocus:true,
            source: "/words",
          });
        });
    </script>
{% end %}

{% block body %}
    <div class="container_12" style="text-align:center;">
      <div class="grid_12" style="height:40%;">
          <p>&nbsp;</p>
      </div>
      <div class="grid_12" style="">
          <h2>{{ escape(handler.settings["application_title"]) }}</h2>
      </div>
      <form id="form_search" action="/search_pattern" method="GET">
      <div class="grid_12">
          <input id="autocomplete" name="search_pattern" autocomplete="off" size="30" style="height:20px; margin-bottom:20px;">
      </div>
      <div class="clear"></div>
      <div class="grid_12">
          <input id="search" type="image" src="{{ static_url("images/search_button.png") }}" alt="搜索" value="搜索" height="30">
      </div>
      </form>
    </div>

    <script>
      function form_search_submit(){
         $('form_search').submit()
      }
      $('search').bind('click', form_search_submit());
    </script>
{% end %}
